import { defineComponent, renderSlot, watch } from 'vue';
import { Theme } from '@/utils/theme.js';

const ThemeProvider = defineComponent({
  name: 'ThemeProvider',
  props: {
    theme: {
      type: String,
      default: 'blue'
    }
  },
  setup(props, { slots }) {
    onMounted(() => {
      setTheme(props.theme);
    });
    watch(
      () => props.theme,
      (val) => {
        setTheme(val);
      }
    );
    function setTheme(type) {
      const themeObj = Theme[type];
      document.documentElement.classList.add(themeObj['color-scheme'] || 'color-schema');
      // 设置css 变量
      Object.keys(themeObj).forEach((item) => {
        document.documentElement.style.setProperty(item, themeObj[item]);
      });
    }
    return () => renderSlot(slots, 'default');
  }
});

export default ThemeProvider;
